<template>
    <!-- 头部 搜索、新增 区域 -->
    <el-row :gutter="20" class="header">
        <el-col :span="5">
            <el-cascader v-model="currentOrgId" :options="orgData" :props="cascaderProps" placeholder="请选择组织" clearable />
        </el-col>
        <el-col :span="6">
            <el-input v-model="search" placeholder="请输入房产名称" clearable />
        </el-col>
        <el-col :span="2">
            <el-button type="primary" @click="houseData = []; getHouse()"> 搜索 </el-button>
        </el-col>
        <el-col :span="2">
            <el-button type="success" @click="createDialog = true; getExtendData()">+ 新增</el-button>
        </el-col>
    </el-row>

    <!-- 华丽的分割线 -->
    <el-divider />

    <!-- 表格形式展示house数据 -->
    <div>
        <el-table :data="houseData" row-key="id" style="width: 100%" max-height="490px">
            <el-table-column prop="id" label="编号" v-if="false" />
            <el-table-column prop="path" label="路径" width="200" sortable/>
            <el-table-column prop="name" label="房产名称" width="100"/>
            <el-table-column prop="typeName" label="房产类型" width="80">
                <template #default="{ row }">
                    <el-tag v-if="row.typeName != null">{{ row.typeName }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="statusName" label="房产状态" width="110" sortable>
                <template #default="{ row }">
                    <el-tag effect="dark" v-if="row.statusName != null">{{ row.statusName }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="area" label="房产面积" width="110" sortable/>
            <el-table-column prop="tenantName" label="租用人" width="100">
                <template #default="{ row }">
                    <el-tag v-if="row.tenantName != null" type="success">{{ row.tenantName }}</el-tag>
                    <el-tag v-else type="warning">暂无</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="orgName" label="所属组织" v-if="false" />

            <!-- 固定字段 -->
            <el-table-column fixed="right" label="操作" width="200">

                <template #="rs">
                    <el-button link type="primary" size="small"
                        @click="editDialog = true; editDataTransfer(rs.row); getExtendData()">编辑</el-button>

                    <el-popconfirm width="220" confirm-button-text="确认" cancel-button-text="取消"
                        @confirm="deleteHouse(rs.row.id)" icon-color="#F56C6C" title="确认删除这个房屋？">
                        <template #reference>
                            <el-button link type="primary" size="small">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>

            </el-table-column>
        </el-table>
    </div>

    <!-- 底部分页器 -->
    <div v-if="total > 0">
        <div class="page-box">
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 50, 100]"
                :small="true" :disabled="false" :background="true" layout="total, sizes, prev, pager, next, jumper"
                :total="total" @size-change="getHouse" @current-change="getHouse" />
        </div>
    </div>

    <!-- 新增区块的弹出层 -->
    <el-dialog v-model="createDialog" title="新增房产" width="32%">

        <el-form :model="createForm">

            <el-form-item label="房产名称">
                <el-input v-model="createForm.name" placeholder="请输入房产名称"></el-input>
            </el-form-item>
            <el-form-item label="房产类型">
                <el-select v-model="createForm.typeId" placeholder="请选择房产类型">
                    <el-option v-for="item in houseTypeData" :key="item.id" :value="item.id" :label="item.name">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="房产状态">
                <el-select v-model="createForm.statusId" placeholder="请选择房产状态">
                    <el-option v-for="item in houseStatusData" :key="item.id" :value="item.id" :label="item.name">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="房产面积">
                <el-input v-model="createForm.area" placeholder="请输入房产面积"></el-input>
            </el-form-item>
            <el-form-item label="所属组织">
                <el-cascader v-model="createForm.orgId" :options="orgData" :props="cascaderProps" placeholder="请选择组织"
                    clearable />
            </el-form-item>

            <el-form-item label="现租用人">
                <el-select v-model="createForm.tenantId" placeholder="请选择现租用人">
                    <el-option v-for="tenant in tenantData" :key="tenant.id" :value="tenant.id" :label="tenant.name">
                    </el-option>
                </el-select>
            </el-form-item>

        </el-form>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="reset">重置</el-button>
                <el-button type="primary" @click="createHouse">确认</el-button>
            </span>
        </template>
    </el-dialog>
    <!-- 编辑区块的弹出层 -->
    <el-dialog v-model="editDialog" title="编辑房产" width="32%">

        <el-form :model="editForm">

            <el-form-item label="房产名称">
                <el-input v-model="editForm.name" placeholder="请输入房产名称"></el-input>
            </el-form-item>
            <el-form-item label="房产类型">
                <el-select v-model="editForm.typeId" placeholder="请选择房产类型">
                    <el-option v-for="item in houseTypeData" :key="item.id" :value="item.id" :label="item.name">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="房产状态">
                <el-select v-model="editForm.statusId" placeholder="请选择房产状态">
                    <el-option v-for="item in houseStatusData" :key="item.id" :value="item.id" :label="item.name">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="房产面积">
                <el-input v-model="editForm.area" placeholder="请输入房产面积"></el-input>
            </el-form-item>
            <el-form-item label="所属组织">
                <el-cascader v-model="editForm.orgId" :options="orgData" :props="cascaderProps" placeholder="请选择组织"
                    clearable />
            </el-form-item>

            <el-form-item label="现租用人">
                <el-select v-model="editForm.tenantId" placeholder="请选择现租用人">
                    <el-option v-for="tenant in tenantData" :key="tenant.id" :value="tenant.id" :label="tenant.name">
                    </el-option>
                </el-select>
            </el-form-item>

        </el-form>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="editDialog = false">取消</el-button>
                <el-button type="primary" @click="editHouse">确认</el-button>
            </span>
        </template>
    </el-dialog>
</template>



<script setup>
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
const router = useRouter();

import { orgGetService, houseGetService, houseCreateService, houseUpdateService, houseDeleteService, houseGetTypeService, houseGetStatusService } from '@/api/property.js';
import { tenantGetPlainService } from '@/api/user.js';

const search = ref()
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref()
const currentOrgId = ref(0)

const houseData = ref([])
const orgData = ref([])
const houseTypeData = ref([{ id: 0, name: '' }])
const houseStatusData = ref([{ id: 0, name: '' }])
const tenantData = ref([{ id: 0, name: '' }])

const cascaderProps = { // 级联选择框参数
    expandTrigger: 'hover',// as const,
    checkStrictly: true,
    emitPath: false,
    value: 'id',
    label: 'name',
}

const createDialog = ref(false)
const editDialog = ref(false)
let createForm = reactive({
    id: null,
    name: null,
    typeName: null,
    typeId: null,
    statusName: null,
    statusId: null,
    area: null,
    path: null,
    orgName: null,
    orgId: null,
    tenantName: null,
    tenantId: null
})
let editForm = reactive({
    id: null,
    name: null,
    typeName: null,
    typeId: null,
    statusName: null,
    statusId: null,
    area: null,
    path: null,
    orgName: null,
    orgId: null,
    tenantName: null,
    tenantId: null
})
// 点击编辑时，数据回显
const editDataTransfer = function (row) {
    editForm = row;
}
// 重置新建表单
let reset = () => {
    createForm.id = null
    createForm.name = null
    createForm.typeId = null
    createForm.typeName = null
    createForm.statusId = null
    createForm.statusName = null
    createForm.orgId = null
    createForm.orgName = null
    createForm.area = null
    createForm.path = null
    createForm.tenantId = null
    createForm.tenantName = null
}

// 获取org列表
async function getOrg() {
    try {
        let result = await orgGetService(null, 0, 0);
        if (result.code == 200) {
            orgData.value = result.data.list;
        }
        else if (result.code == 401) {
            ElMessage.error(result.msg)
            router.push({ path: '/login' });
        }
    } catch (error) {
        ElMessage.error('系统异常')
        console.log(error)
    }
}
getOrg();
// 获取house列表
async function getHouse() {
    try {
        let result = await houseGetService(search.value, currentPage.value, pageSize.value, currentOrgId.value);
        if (result.code == 200) {
            houseData.value = result.data.list;
            total.value = result.data.total;
        }
        else if (result.code == 401) {
            ElMessage.error(result.msg)
            router.push({ path: '/login' });
        }else{
            ElMessage.warning(result.msg)
            houseData.value = [];
            total.value = 0;
        }
    } catch (error) {
        ElMessage.error('系统异常')
        console.log(error)
    }
}
getHouse();
// 新建house
async function createHouse() {
    try {
        let result = await houseCreateService(createForm);
        if (result.code == 200) {
            ElMessage.success(result.msg)
            createDialog.value = false
            getHouse();
        }
        else if (result.code == 401) {
            ElMessage.error(result.msg)
            router.push({ path: '/login' });
        }else{
            ElMessage.error(result.msg)
        }
    } catch (error) {
        ElMessage.error('系统异常')
    }
}
// 删除house
async function deleteHouse(id) {
    try {
        let result = await houseDeleteService(id);
        if (result.code == 200) {
            ElMessage.success(result.msg)
            getHouse()
        }
        else if (result.code == 401) {
            ElMessage.error(result.msg)
            router.push({ path: '/login' });
        }
    } catch (error) {
        ElMessage.error('系统异常')
    }
}
// 编辑house
async function editHouse() {
    try {
        let result = await houseUpdateService(editForm);
        if (result.code == 200) {
            ElMessage.success(result.msg)
            editDialog.value = false
            getHouse()
        }
        else if (result.code == 401) {
            ElMessage.error(result.msg)
            router.push({ path: '/login' });
        }
    } catch (error) {
        ElMessage.error('系统异常')
    }
}

// 获取拓展信息
const getExtendData = () => {
    getHouseType()
    getHouseStatus()
    getTenant()
}

// 获取房屋类型信息
async function getHouseType() {
    try {
        let result = await houseGetTypeService();
        if (result.code == 200) {
            houseTypeData.value = result.data;
        }
        else if (result.code == 401) {
            ElMessage.error(result.msg)
            router.push({ path: '/login' });
        }
    } catch (error) {
        ElMessage.error("系统异常")
    }
}
// 获取房屋状态信息
async function getHouseStatus() {
    try {
        let result = await houseGetStatusService();
        if (result.code == 200) {
            houseStatusData.value = result.data;
        }
        else if (result.code == 401) {
            ElMessage.error(result.msg)
            router.push({ path: '/login' });
        }
    } catch (error) {
        ElMessage.error("系统异常")
    }
}
// 获取租户列表
async function getTenant() {
    try {
        let result = await tenantGetPlainService();
        if (result.code == 200) {
            tenantData.value = result.data;
        }
        else if (result.code == 401) {
            ElMessage.error(result.msg)
            router.push({ path: '/login', query: {} });
        }
    } catch (error) {
        ElMessage.error("系统异常")
    }
}

</script>

<style>
.header {
    margin-bottom: 7px;
}
</style>